import React from 'react';
import {
  Modal, Form, Input, Select, Icon
} from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;

class AddServerModal extends React.Component {

  state={
    expand: false,
    serverType: '',
  }

  componentDidMount(){
    const { value } = this.props;
    if(value){
      this.setState({
        serverType: value.type,
      });
    }
  }

  expandMore = () => {
    this.setState({
      expand: !this.state.expand,
    });
  }

  onChangeType = (value) => {
    this.setState({
      serverType: value,
    });
  }

  updateServer = () => {
    const { form, value={}, onOk } = this.props;
    form.validateFields((error, fieldsValue) => {
      if(error) return;
      onOk({
        ...value,
        ...fieldsValue,
      });
    });
  }

  render(){

    const { visible, onCancel, form, value={}, serverTypeList } = this.props;
    const { getFieldDecorator } = form;
    const { expand, serverType } = this.state;

    return (
      <Modal
        destroyOnClose
        title="修改应用"
        visible={visible}
        onCancel={onCancel}
        onOk={this.updateServer}
        >
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="应用类型">
          { getFieldDecorator('type', {
              rules: [{ required: true, message: '请选择应用类型' }],
              initialValue: value.type,
            })(<Select placeholder="请选择应用类型"
                onChange={this.onChangeType}
                style={{width: '100%'}}>
                { serverTypeList.map(item => <Select.Option key={item.key}>{item.value}</Select.Option>)}
              </Select>)
          }
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="应用别名">
          { getFieldDecorator('name', {
              rules: [{ required: serverType === '9' ? true : false, message: '请输入应用别名' }],
              initialValue: value.name,
            })(<Input placeholder="展示在页面上的应用名称" />)
          }
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="启动脚本路径">
          { getFieldDecorator('shellpath', {
              rules: [{ required: true, message: "请输入启动脚本的路径"}],
              initialValue: value.shellpath,
            })(<Input placeholder="启动脚本路径" />)
          }
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="cache路径"
          style={{display: serverType==='2' ? "block" : "none"}}>
          { getFieldDecorator('cachepath', {
              rules: [{
                  required: serverType === '2' ? true : false,
                  message: '请输入bundle cache缓存路径'
                }],
              initialValue: value.cachepath,
            })(<Input placeholder="清除bundle cache缓存" />)
          }
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="cc代码路径"
          style={{display: serverType==='1' ? "block" : "none"}}>
          { getFieldDecorator('cachepath', {
              rules: [{
                required: serverType === '1' ? true : false,
                message: '请输入cc下载的代码路径'
              }],
              initialValue: value.cachepath,
            })(<Input placeholder="用于清除cc下载的代码" />)
          }
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="grep关键字">
          { getFieldDecorator('grep', {
              rules: [{ required: true, message: "grep关键字不能为空"}],
              initialValue: value.grep,
            })(<Input placeholder="查找进程关键字 Dserver_id=xxx" />)
          }
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="描述">
          { getFieldDecorator('desc', {
              initialValue: value.desc,
            })(<TextArea placeholder="应用简短描述信息" rows={4} />)
          }
        </FormItem>
        <a style={{display: "block", marginBottom: 20}}
          onClick={this.expandMore}>应用服务器配置(选填)<Icon type={ expand ? "up" : "down"}/></a>
        <div style={{display: expand ? "block" : "none"}}>
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="ip">
            { getFieldDecorator('ip', {
                initialValue: value.ip,
              })(<Input placeholder="默认系统ip地址" />)
            }
          </FormItem>
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="端口">
            { getFieldDecorator('port', {
                initialValue: value.port,
              })(<Input placeholder="默认系统端口" />)
            }
          </FormItem>
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="用户名">
            { getFieldDecorator('username', {
                initialValue: value.username,
              })(<Input placeholder="默认使用系统用户名" />)
            }
          </FormItem>
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="密码">
            { getFieldDecorator('password', {
                initialValue: value.password,
              })(<Input placeholder="默认使用系统密码" />)
            }
          </FormItem>
        </div>
      </Modal>
    );
  }
}

export default Form.create()(AddServerModal);
